<template>
  <router-view />
</template>

<script setup>
// 新增 markRaw 导入
import { ref, reactive, markRaw, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import WeiBo from './components/WeiBo.vue'
import Counter from './components/Counter.vue'
import MoYu from './components/MoYu.vue'
import Work from './components/Work.vue'
import StudentInfo from './components/StudentInfo.vue'

// Props定义
const props = defineProps({
  upName: String,
  blogContent: [String, Number],
  forward: {
    type: Number,
    required: true
  },
  reply: {
    type: Number,
    default: 0
  },
  like: Number
})

// 微博数据相关
const receiveFontSize = ref(1)
const weiBoList = reactive([
  {
    id: 1,
    upName: '996',
    blogContent: '月薪3000真是太多了！',
    forward: 12,
    reply: 20,
    like: 500
  },
  {
    id: 2,
    upName: '先富带动后富',
    blogContent: 'xs，一周工作超80小时！',
    forward: 55,
    reply: 15,
    like: 800
  },
  {
    id: 3,
    upName: '包跑的',
    blogContent: '赞美欧盟！',
    forward: 888,
    reply: 77,
    like: 666
  }
])

// 工作状态切换
// 修复：添加 markRaw 导入后即可正常使用
const workComponents = {
  MoYu: markRaw(MoYu),
  Work: markRaw(Work)
}
const workComponent = ref('MoYu')

const toggleWorkComponent = () => {
  workComponent.value = workComponent.value === 'MoYu' ? 'Work' : 'MoYu'
}

// 数据获取
onMounted(async () => {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
  if (isLoggedIn) {
    await getData()
  }
})

async function getData() {
  const user = await getUser()
  const order = await getOrder(user.id)
  const product = await getProduct(order)
}

function getUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'Alice', id: 2005001 })
    }, 3000)
  })
}

async function getOrder(userId) {
  return { name: 'Holic', price: 100, userId }
}

function getProduct(order) {
  return new Promise((resolve) => {
    resolve(order.name)
  })
}

// 字体大小处理
function receive(data) {
  receiveFontSize.value += data
}
</script>

<style scoped>
.interaction-buttons {
  margin: 20px 0;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.status-toggle {
  margin: 20px 0;
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.el-card {
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #2c3e50;
  margin-top: 30px;
}
</style>